<!--
 * @Descripttion:
 * @revision:
 * @Author: YouHuJun
 * @Date: 2021-09-22 14:51:37
 * @LastEditors: youhujun 2900976495@qq.com
 * @LastEditTime: 2025-01-17 09:43:53
-->
<template>
  <div>
    <el-form
      ref="updateSystemWechatConfigForm"
      :model="updateSystemWechatConfigForm"
      :rules="updateSystemWechatConfigRules"
      label-width="auto"
      :inline="true"
      label-position="left"
      status-icon
      inline-message
      style="width:80%;margin-left:auto;margin-right: auto;padding:10px 10px;"
    >
      <el-row type="flex">
        <el-col :span="24" class="center">
          <div class="custom-input-width-name">
            <el-form-item label="名称" prop="name">
              <el-input v-model="updateSystemWechatConfigForm.name" placeholder="名称" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24" class="center">
          <el-form-item label="类型" prop="type">
            <el-select v-model="updateSystemWechatConfigForm.type" placeholder="请选择" class="select">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24" class="center">
          <div class="custom-input-width">
            <el-form-item label="appid" prop="appid">
              <el-input v-model="updateSystemWechatConfigForm.appid" placeholder="appid" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24" class="center">
          <div class="custom-input-width">
            <el-form-item label="appsecret" prop="appsecret">
              <el-input v-model="updateSystemWechatConfigForm.appsecret" placeholder="appsecret" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="updateSystemWechatConfigForm.type === 30" type="flex">
        <el-col :span="24" class="center">
          <div class="custom-input-width-url">
            <el-form-item label="授权回调链接" prop="auth_redirect_url">
              <el-input v-model="updateSystemWechatConfigForm.auth_redirect_url" placeholder="url" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24" class="center">
          <el-form-item label="note" prop="note">
            <el-input
              v-model="updateSystemWechatConfigForm.note"
              type="textarea"
              :rows="1"
              :autosize="{ minRows: 2, maxRows: 6 }"
              placeholder="备注"
              maxlength="30"
              show-word-limit
              class="info"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24" class="center">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="updateSystemWechatConfigForm.sort" placeholder="数字排序" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="12" :offset="4">
          <el-form-item>
            <el-button type="primary" @click="submitForm('updateSystemWechatConfigForm')">修改</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item>
            <el-button @click="resetForm('updateSystemWechatConfigForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>

import { debounce } from '@/utils'

import { updateSystemWechatConfig } from '@/api/laravel-fast-api/v1/system/systemConfig/otherPlatform/systemWechatConfig'
import permission from '@/directive/permission/index.js' // 权限判断指令
export default
{
  // 组件名称
  name: 'UpdateSystemWechatConfigForm',
  // 组件
  components:
    {
    },
  directives: { permission },
  props:
    {
      userList: {
        type: Array,
        default: () =>
        {
          return []
        }
      },
      beforeSystemWechatConfigForm: {
        type: Object,
        default: null
      }
    },
  // 数据
  data()
  {
    return {
      //   select选项
      typeOptions: [{
        value: 10,
        label: '小程序'
      }, {
        value: 20,
        label: '小游戏'
      },
      {
        value: 30,
        label: '公众号'
      }
      ],
      // 添加菜单表单
      updateSystemWechatConfigForm: {
        id: 0,
        // 名称
        name: '',
        // 类型 10小程序 20小游戏 30公众号
        type: 10,
        appid: '',
        appsecret: '',
        // 公众号授权跳转链接
        auth_redirect_url: '',
        // 备注
        note: '',
        sort: 100
      },
      // 添加表单规则
      updateSystemWechatConfigRules: {
        name: [
          { pattern: /[.]*/, message: '随便', trigger: 'blur' }
        ],
        type: [
          { pattern: /^[0-9]{0,3}$/, message: '只能是0或1', trigger: 'blur' }
        ],
        appid: [
          { required: true, message: '必填', trigger: 'blur' },
          { pattern: /[.]*/, message: '随便', trigger: 'blur' }
        ],
        appsecret: [
          { required: true, message: '必填', trigger: 'blur' },
          { pattern: /[.]*/, message: '随便', trigger: 'blur' }
        ],
        auth_redirect_url: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        note: [
          { pattern: /[.]*/, message: '随便', trigger: 'blur' }
        ],
        sort: [
          { pattern: /^[0-9]+$/, message: '只能是0-9数字', trigger: 'blur' }
        ]

      }
    }
  },
  // 计算属性
  computed:
  {

  },
  // 监听
  watch:
  {
    beforeSystemWechatConfigForm: {
      handler(value)
      {
        this.updateSystemWechatConfigForm.id = value.id
        this.updateSystemWechatConfigForm.name = value.name
        this.updateSystemWechatConfigForm.type = value.type
        this.updateSystemWechatConfigForm.appid = value.appid
        this.updateSystemWechatConfigForm.appsecret = value.appsecret
        this.updateSystemWechatConfigForm.auth_redirect_url = value.auth_redirect_url
        this.updateSystemWechatConfigForm.note = value.note
        this.updateSystemWechatConfigForm.sort = value.sort
      },
      deep: true,
      immediate: true
    }
  },
  // 实例创建之前
  beforeCreate()
  {
  },
  // 创建
  created()
  {

  },
  // 挂载之前
  beforeMount()
  {

  },
  // 挂载 --常用
  mounted()
  {

  },
  // 更新之前
  beforeUpdate()
  {
  },
  // 跟新后
  updated()
  {
  },
  // 销毁之前
  beforeDestroy()
  {
  },
  // 销毁后
  destroyed()
  {
  },
  // 方法
  methods:
  {
    initSystemWechatConfigForm()
    {
      // console.log(this.beforeSystemWechatConfigForm)
      Object.assign(this.updateSystemWechatConfigForm, this.beforeSystemWechatConfigForm)
    },
    // 提交表单
    submitForm: debounce(function(formName)
    {
      this.$refs[formName].validate((valid) =>
      {
        if (valid)
        {
          // console.log(this.updateSystemWechatConfigForm)
          this.updateSystemWechatConfig(this.updateSystemWechatConfigForm)
        }
        else
        {
          console.log('未通过验证!')
          return false
        }
      })
    }, 600),

    // 重置表单
    resetForm(formName)
    {
      this.initSystemWechatConfigForm()
    },

    /**
     * 添加菜单
     */
    updateSystemWechatConfig(data)
    {
      const _this = this
      updateSystemWechatConfig(data).then(res =>
      {
        if (res && res.code === 0)
        {
          _this.$emit('handleCloseDialog', false)
          _this.$emit('hanldeUpdateData', true)

          _this.$message(
            {
              message: res.msg,
              type: 'success'
            })
          _this.initSystemWechatConfigForm()
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
/**表单 */
 /* .content::v-deep .el-form-item__label{
   width:100px;
 } */
  .center{
    text-align: center;
 }
 .select{
	width: 250px;
 }

.info{
	width: 400px;
}
.custom-input-width::v-deep  .el-form-item__content{
  width:300px;
}
.custom-input-width-name::v-deep  .el-form-item__content{
  width:400px;
}
.custom-input-width-url::v-deep  .el-form-item__content{
  width:500px;
}
</style>
